<template>
  <el-collapse-item key="mediaList" title="素材" name="mediaList">
    <div class="tool">
      <el-button icon="el-icon-plus" @click="handlerControl(CONTROL_TYPE.ADD)"></el-button>
      <el-button :disabled="!hasCurItem" icon="el-icon-delete" @click="handlerControl(CONTROL_TYPE.DELETE)"></el-button>
      <el-button
        :disabled="!hasCurItem || curItem === 0"
        icon="el-icon-upload2"
        @click="handlerControl(CONTROL_TYPE.UP)"
      ></el-button>
      <el-button
        :disabled="!hasCurItem || curItem === groupLen - 1"
        icon="el-icon-download"
        @click="handlerControl(CONTROL_TYPE.DOWN)"
      ></el-button>
    </div>
    <div class="list">
      <div
        v-for="(item, index) in curComponent.srcGroup"
        :key="item.id"
        class="item"
        :class="{ active: curItem === index }"
        @click="handlerItem(index)"
      >
        <div class="top">
          <div class="pic"><img class="pic-img" :src="item.src" alt="" /></div>
          <div class="name">{{ item.name }}</div>
        </div>
        <div class="msg">
          <span>时长：{{ formatSeconds(item.time) }}</span>
          <span>大小：{{ bytesToSize(item.size) }}</span>
        </div>
      </div>
      <div v-if="!curComponent.srcGroup.length" class="tip">暂未添加素材</div>
    </div>
    <!--    <el-form label-width="90px">-->
    <!--      <el-form-item label="一键素材次数">-->
    <!--        <el-input v-model="mediaTimes" @change="changeMediaTimes"><template slot="append">次</template></el-input>-->
    <!--      </el-form-item>-->
    <!--    </el-form>-->

    <el-dialog title="视频素材" :visible.sync="picVisible" width="600px">
      <div class="dialog-cont">
        <div class="search">
          <el-input v-model="keyWorld" placeholder="图片搜索"></el-input>
          <el-button class="btn" type="primary">搜索</el-button>
        </div>
        <div class="table-list">
          <el-table ref="table" :data="tableData" style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="pic" label="图片" width="180">
              <template #default="scope">
                <img class="img" :src="scope.row.path" alt="" />
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" width="180"> </el-table-column>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="picVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlerSure">确 定</el-button>
      </span>
    </el-dialog>
  </el-collapse-item>
</template>
<script>
import { CONTROL_TYPE } from '@/utils/constant'
import { picAttr } from '@/utils/attr'
import { forEach, get } from 'lodash'
import { bytesToSize, formatSeconds, generateID } from '@/utils/utils'

export default {
  name: 'MediaList',
  data() {
    return {
      mediaList: [],
      activeName: 'mediaList',
      mediaTimes: 0,
      mediaStopTime: 0,
      curItem: -1,
      picVisible: false,
      keyWorld: '',
      tableData: [
        {
          id: '111',
          path: 'https://www.ledcloud.cn/resources/video/A_36_41_468_1506/202506/eb5f753b-33a6-4d80-97a1-19f60074d733_1750683858843_copy.mp4',
          name: '视频素材',
          size: 15200,
          time: 1200,
        },
        {
          id: '222',
          path: 'https://vjs.zencdn.net/v/oceans.mp4',
          name: '视频素材2222',
          size: 20000,
          time: 1000,
        },
      ],
    }
  },
  computed: {
    CONTROL_TYPE() {
      return CONTROL_TYPE
    },
    curComponent() {
      return this.$store.state.curComponent
    },
    hasCurItem() {
      return this.curItem > -1
    },
    groupLen() {
      return this.curComponent.srcGroup.length
    },
  },
  methods: {
    formatSeconds,
    bytesToSize,
    handlerControl(type) {
      let itemData = {}
      let moveIndex = 0

      switch (type) {
        case CONTROL_TYPE.ADD:
          this.picVisible = true
          break
        case CONTROL_TYPE.DELETE:
          this.curComponent.srcGroup.splice(this.curItem, 1)
          moveIndex = this.curItem - 1
          this.curItem = moveIndex < 0 ? -1 : moveIndex
          this.changePageTotalTime()
          break
        case CONTROL_TYPE.UP:
          itemData = get(this.curComponent.srcGroup.splice(this.curItem, 1), '[0]')
          moveIndex = this.curItem - 1
          this.curComponent.srcGroup.splice(moveIndex, 0, itemData)
          this.curItem = moveIndex
          break
        case CONTROL_TYPE.DOWN:
          itemData = get(this.curComponent.srcGroup.splice(this.curItem, 1), '[0]')
          moveIndex = this.curItem + 1
          this.curComponent.srcGroup.splice(moveIndex, 0, itemData)
          this.curItem = moveIndex
          break
      }
    },
    handlerSure() {
      const tableSelect = this.$refs.table.selection
      const pics = []

      forEach(tableSelect, (item) => {
        const { path, name, size = 0, time = 0 } = item
        const attr = JSON.parse(JSON.stringify(picAttr))
        attr.src = path
        attr.storagePath = path
        attr.name = name
        attr.size = size
        attr.time = time
        attr.id = generateID()

        pics.push(attr)
      })
      this.picVisible = false
      this.curComponent.srcGroup.push(...pics)
      this.changePageTotalTime()
    },
    handlerItem(index) {
      this.curItem = index
    },
    changeMediaTimes() {
      forEach(this.curComponent.srcGroup, (item) => {
        item.playTimes = this.mediaTimes
      })
    },
    changePageTotalTime() {
      this.$store.commit('setPageTotalTime')
    },
  },
}
</script>

<style scoped lang="scss">
.list {
  max-height: 300px;
  margin: 10px 0;
  overflow-y: auto;
  border-bottom: 1px solid #f1f1f1;
  .item {
    padding: 5px;
    margin-bottom: 10px;
    &.active {
      background: #ecf5ff;
    }
    .msg {
      display: flex;
      justify-content: space-between;
    }
    .top {
      display: flex;
      .pic {
        width: 100px;
        height: 80px;
        margin-right: 10px;
        background: #ddd;
        overflow: hidden;
        .pic-img {
          width: 100px;
          height: 100px;
        }
      }
    }
  }
}
.tool {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f1f1f1;
  padding: 10px 0;
}
.tip {
  padding: 20px 0;
  color: #999;
  font-size: 14px;
  text-align: center;
}
.dialog-cont {
  .table-list {
    max-height: 400px;
    overflow-y: auto;
    .img {
      width: 100px;
      height: 100px;
    }
  }
  .search {
    width: 300px;
    margin-bottom: 10px;
    display: flex;
    .btn {
      margin-left: 10px;
    }
  }
}
</style>
